<template>
  <div id="dialog">
    <div class="container">
      <div class="topNav">
        <div class="title"><svg t="1620893454637" class="titleIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1016" width="200" height="200"><path d="M984.269 570.726L537.037 762.368a64.717 64.717 0 0 1-50.586 0L39.168 570.726a63.898 63.898 0 0 1 50.586-117.401L512 634.112l421.683-180.787a64.563 64.563 0 0 1 64.256 7.014 63.488 63.488 0 0 1 25.6 59.239 64.46 64.46 0 0 1-39.219 51.2z m0-255.436L537.037 506.88a64.307 64.307 0 0 1-50.637 0L39.168 315.29a64.154 64.154 0 0 1 0-117.453L486.4 6.195a64.717 64.717 0 0 1 50.586 0l447.232 191.642a63.846 63.846 0 0 1 0 117.453zM25.6 715.776a64.307 64.307 0 0 1 64.205-6.963L512 889.6l421.683-180.787a64.41 64.41 0 0 1 64.256 6.963 63.642 63.642 0 0 1 25.6 59.238 64.307 64.307 0 0 1-39.219 51.2l-447.232 191.642a64.717 64.717 0 0 1-50.586 0L39.168 826.163A64.256 64.256 0 0 1 25.6 715.776z" p-id="1017" fill="#6A75CA"></path></svg>
          <div class="titleContent">
            {{ titleData }}
          </div>
        </div>
        <div @click="closeDialog" class="closeImg"><svg t="1620892885128" class="icon" viewBox="0 0 1068 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="796" width="200" height="200"><path d="M32.500587 921.155677a58.100364 58.100364 0 0 0 82.230937 82.186416l410.932079-410.932079 410.9766 410.932079a58.100364 58.100364 0 0 0 82.186416-82.186416l-410.932079-410.932079 410.932079-411.021121A58.100364 58.100364 0 0 0 936.640203 17.060582l-410.932079 410.9766L114.731524 17.060582A58.100364 58.100364 0 1 0 32.500587 99.202477l410.932079 410.932078-410.932079 410.976601z" p-id="797"></path></svg></div><span class="message"></span>
      </div>
      <div class="body">
        <textarea disabled :value="bodyData"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dialog",
  props: ['titleData', 'bodyData'],
  data() {
    return {

    }
  },
  methods:{
    closeDialog(){
      //给父组件传参
      this.$emit('closeDialog',false)
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
textarea {
  width: 80%;
  height: 80%;
  margin-top: 3%;
  resize: none;
  padding: 15px;
}
#dialog{
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  text-align: center;
  background-color: white;
  border-radius: 20px;
  width: 50%;
  height: 80%;
}
.message{
  text-align: center;
  position: absolute;
  top: 50%;
}
.title {
  float: left;
  display: flex;
  margin-left: 1vh;
  margin-top: 1vh;
}
.titleIcon {
  height: 2vw;
  width: 2vw;
}
.titleContent {
  padding-left: 1vh;
  padding-top: 1vh;

  font-size: 19px;
  font-weight: 550;
  color: rgb(0, 43, 136);
}
.icon {
  height: 1vw;
  width: 1vw;
}
.closeImg{
  width: 20px;
  height: 20px;
  float: right;
  margin-right: 1vh;
  margin-top: 1vh;
  cursor: pointer;
  background-size: cover;
}
.body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>
